<script setup>
import { ref, onMounted, defineProps, toRefs, watch } from "vue";
import { videoPlay } from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  photoKey: String,
});
const { photoKey } = toRefs(props);

const videoMap = ref({
  odr: "https://videox.gzac.org/sv/odr_pt.mp4",
  zcr: "https://videox.gzac.org/sv/gz_zcr.mp4",
  xc: "https://videox.gzac.org/sv/xc_sp.mp4",
});
const videoOpt = ref({
  width: "800px", // 播放器高度
  height: "500px", // 播放器高度
  color: "#409eff", // 主题色
  // muted: false, // 静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], // 播放倍速
  autoPlay: true, // 自动播放
  loop: false, // 循环播放
  mirror: false, // 镜像画面
  ligthOff: true, // 关灯模式
  volume: 0.3, // 默认音量大小
  control: true, // 是否显示控制器
  title: "", // 视频名称
  src: "", // 视频源
  poster: "", // 封面
});
const videoUrl = ref("");

onMounted(async () => {});

watch(
  () => props.photoKey,
  (val, oldVal) => {
    // videoOpt.value.src = videoMap.value[val];
    videoUrl.value = videoMap.value[val];
  },
  {
    immediate: true,
    deep: true,
  }
);

const onPlay = (e) => {};
const onPause = (e) => {};
const onTimeupdate = (e) => {};
const onCanplay = (e) => {};
</script>

<template>
  <div class="videoDisplay">
    <div class="outBox">
      <!-- <videoPlay
        class="video"
        v-bind="videoOpt"
        @play="onPlay"
        @pause="onPause"
        @timeupdate="onTimeupdate"
        @canplay="onCanplay"
      /> -->
      <video class="video" :src="videoUrl" controls autoplay></video>
    </div>
  </div>
</template>

<style lang="less" scoped>
.videoDisplay {
  color: #fff;
  display: flex;
  align-items: center;
  .outBox {
    width: 800px;
    height: 500px;
    padding: 26px 16px 16px 16px;
    // margin: auto;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    .video {
      width: 800px;
      height: 500px;
    }
  }
}
</style>
